<template>
  <transition name="rightToLeft">
    <div class="passwordCheck">
      <div class="errorMsg" v-if="errorMsg">{{errorMsg}}</div>
      <div class="strong" v-if="!errorMsg&&password">
        <div class="t">强度</div>
        <div class="list">
          <div class="li" :class="level>0?'weak':''"></div>
          <div class="li" :class="level>1?'comm':''"></div>
          <div class="li" :class="level>2?'stro':''"></div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "passwordCheck",
  data() {
    return {
      errorMsg: null,
      level: 0
    }
  },
  props: {
    password: String,
    min: {
      type: Number,
      default: 6
    },
    max: {
      type: Number,
      default: 20
    },
    canNull:{
      type: Boolean,
      default: false
    }
  },
  methods: {
    checkPass(){
      this.errorMsg = null;
      this.level = 0;
      this.$emit('changePassCheck', true);
      if (!this.password && this.canNull) return;


      if (!this.password && !this.canNull) {
        this.errorMsg = "密码不能为空";

        this.$emit('changePassCheck', false);
        return;
      }

      if (this.password.length < this.min || this.password.length > this.max){
        this.errorMsg = "请输入{0}-{1}位的密码".format(this.min, this.max);

        this.$emit('changePassCheck', false);
        return;
      }

      var weakReg =new RegExp("^(?:\\d+|[a-zA-Z]+|[!@#$%&_*]+)$"); // 弱：纯数字，纯字母，纯特殊字符
      if (weakReg.test(this.password)){
        this.level = 1;
      }

      var commReg =new RegExp("^(?![a-zA-z]+$)(?!\\d+$)(?![!@#$%&_*]+$)[a-zA-Z\\d!@#$%&_*]+$"); // 中：字母+数字，字母+特殊字符，数字+特殊字符
      if (commReg.test(this.password)){
        this.level = 2;
      }

      var stroReg =new RegExp("^(?![a-zA-z]+$)(?!\\d+$)(?![!@#$%&_*]+$)(?![a-zA-z\\d]+$)(?![a-zA-z!@#$%&_*]+$)(?![\\d!@#$%&_*]+$)[a-zA-Z\\d!@#$%&_*]+$"); // 强：字母+数字+特殊字符
      if (stroReg.test(this.password)){
        this.level = 3;
      }
    }
  },
  mounted() {
  },
  watch: {
    password(){
      this.checkPass();
    }
  }
}

</script>

<style>
  .passwordCheck{
    text-align: left;
  }
  .passwordCheck .errorMsg{
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #ff7c7c;
  }
  .passwordCheck .strong{
    height: 30px;
    width: 100%;
    line-height: 30px;
    padding: 5px 0px;
  }
  .passwordCheck .strong .t{
    width: auto;
    height: 100%;
    font-size: 12px;
    float: left;
    color: #757575;
  }
  .passwordCheck .strong .list{
    height: 100%;
    float: left;
    margin-left: 20px;
  }
  .passwordCheck .strong .list .li{
    width: 50px;
    height: 8px;
    margin: 10px 10px 10px 0px;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
  }
  .passwordCheck .strong .list .li.weak{
    background-color: #acea8d;
  }
  .passwordCheck .strong .list .li.comm{
    background-color: #67c23a;
  }
  .passwordCheck .strong .list .li.stro{
    background-color: #368210;
  }
</style>
